<template>
  <div class="container404">
    <div class="content">
      <div class="tips">您找的页面被外星人抓走了~</div>
      <img class="my-img" src="@/assets/icon/404.svg" alt="404" />
      <button @click="GoBack">点击返回</button>
    </div>
  </div>
</template>

<script setup name="404">
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const GoBack = () => {
  router.back()
}

onMounted(() => {})
</script>

<style lang="scss" scoped>
.container404 {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .tips {
      font-size: 2vw;
      margin-bottom: 10vh;
      font-weight: 300;
    }
    .my-img {
      width: 35vw;
      margin-bottom: 10vh;
    }
    button {
      font-size: 1vw;
      font-weight: 700;
    }
  }
}
</style>
